import {
  OrbitControls,
  PerspectiveCamera,
  Sky,
  Torus,
} from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
import { CuboidCollider, Physics, RigidBody } from "@react-three/rapier";
import { Suspense } from "react";
// import { useBox } from "@react-three/cannon"; // 物理碰撞

/*------------------- 用于测试，和验证功能------------------------*/

export const isTest = false; // 开关
export function Test() {
  // 碰撞边界
  // 参数：子元素，偏移量，碰撞边界是否可见，碰撞尺寸
  // function BoudBox({ children, offset, visible = false, dims }) {
  //   const [ref] = useBox(() => ({
  //     mass: 1,
  //     args: dims,
  //     position: offset,
  //   }));
  //   return (
  //     <group ref={ref as any}>
  //       {visible && (
  //         <mesh scale={dims}>
  //           <boxGeometry />
  //           <meshBasicMaterial wireframe />
  //         </mesh>
  //       )}

  //       <group position={offset}>{children}</group>
  //     </group>
  //   );
  // }

  return (
    <div style={{ height: "100vh" }}>
      <Canvas camera={{ fov: 45 }}>
        <Sky sunPosition={[100, 20, 100]} distance={1000} />
        <ambientLight intensity={0.3} />
        <directionalLight intensity={1} position={[100, 100, 100]} />
        <OrbitControls
          target={[0, 0, 0]}
          enableDamping
          dampingFactor={0.2}
          autoRotate={false}
          rotateSpeed={-0.5}
          makeDefault
        />
        <PerspectiveCamera makeDefault fov={75} position={[20, 30, 20]} />
        <Suspense>
          <Physics debug>
            <RigidBody colliders={"hull"} restitution={2}>
              <Torus />
            </RigidBody>

            <CuboidCollider position={[0, -2, 0]} args={[20, 0.5, 20]} />
          </Physics>
        </Suspense>
        {/* 红：x, 绿：y,蓝：z */}
        <axesHelper args={[500]} />
        <gridHelper args={[500]} />
      </Canvas>
    </div>
  );
}
